<template>
  <div class="app">
    <a-breadcrumb style="margin-bottom: 10px;">
      <a-breadcrumb-item>考评管理</a-breadcrumb-item>
      <a-breadcrumb-item>评分记录</a-breadcrumb-item>
    </a-breadcrumb>
    <a-row>
      <div class="flex mb20 mt20">
        <div class="flex mr20">
          <div class="mr5">工作人员:</div>
          <div>{{ info.userId }}</div>
        </div>
        <div class="flex mr20">
          <div class="mr5">考评月份:</div>
          <div>{{ info.kpMonth }}</div>
        </div>
        <div class="flex mr20">
          <div class="mr5">当前评分数:</div>
          <div>{{ info.kpSocre || 0 }}</div>
        </div>
      </div>
      <a-table :columns="columns"
               :data-source="tableData"
               :scroll="{ x: 500 }">
      </a-table>
    </a-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      id: '',
      info: {},
      tableData: [],
      columns: [
        {
          title: '考评ID',
          dataIndex: 'id',
          key: 'id',
          width: 100,
        },
        {
          title: '考评类型',
          width: 100,
        },
        {
          title: '考评意见',
          width: 100,
        },
        {
          title: '影响分值',
          width: 100,
        },
        {
          title: '评分领导',
          width: 100,
        },
        {
          title: '时间',
          dataIndex: 'kpMonth',
          key: 'kpMonth',
          width: 100,
        },
      ],
      loading: true,
      queryForm: { current: 20, offset: 1 },
      menuList: [
        { label: '全部', value: null },
        { label: '遗产保护', value: 'HERITAGE_PROTECTION' },
        { label: '经营准入', value: 'OPERATION_ACCESS' },
        { label: '保护建设', value: 'CONSERVATION_DEVELOPMENT' },
        { label: '执法检查', value: 'LAW_ENFORCEMENT_INSPECTION' },
        { label: '数据维护', value: 'DATA_MAINTENANCE' },
      ],
    }
  },
  mounted() {
    console.log(this.$route.query, this.$route.query.id, 'this.$route.query')
    this.init()
  },
  methods: {
    async init() {
      await this.getInfo()
      await this.getList()
    },
    getList() {
      this.loading = true
      const url = '/government-platform-center/userKpMonth'
      this.$axios.get(url, this.queryForm).then((res) => {
        if (res.data.code == 0) {
          this.tableData = res.data.data
          this.total = res.data.total
          this.loading = false
        }
      })
    },
    getInfo() {
      const url = `government-platform-center/userKpMonth/${this.$route.query.id}`
      this.$axios.get(url).then((res) => {
        if (res.data.code == 0) {
          this.info = res.data.data
        }
      })
    },
  },
}
</script>
<style scoped>

.ant-row {
  border-radius: 5px;
  margin-bottom: 15px;
  background: #fff;
  padding: 20px;
  color: #000;
}

/deep/.ant-table-thead > tr > th {
  color: #000;
  font-weight: bold;
}

/deep/.ant-table-tbody > tr > td {
  color: #000;
}

.ant-col {
  margin: 10px 0;
}

.ant-select {
  width: 60%;
}

.ant-input {
  width: 60%;
}
</style>